<!-- 收费分类管理 -->
<template>
	<!-- 面包屑区 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item :to="{ path: '/counselorInfo' }">咨询师信息管理</el-breadcrumb-item>
		<el-breadcrumb-item>评价管理</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 查询 -->
	<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
		<el-form-item label="评价内容">
			<el-input v-model="queryInfo.evaluateContext" autocomplete="off" placeholder="请输入评价内容"  clearable @clear="queryDataList"></el-input>
		</el-form-item>
		<el-form-item label="用户名">
			<el-input v-model="queryInfo.username" autocomplete="off" placeholder="请输入用户名" clearable @clear="queryDataList"></el-input>
		</el-form-item>
		<el-form-item label="咨询师名">
			<el-input v-model="queryInfo.consultantName" autocomplete="off" placeholder="请输入咨询师名" clearable @clear="queryDataList"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="queryDataList">搜索</el-button>
			<!-- <el-button type="primary" @click="add"> 新增收费分类</el-button> -->
			<el-button type="danger" @click="batchRemove"> 批量删除</el-button>
		</el-form-item>
	</el-form>
	<!-- 展示表格-->
	<el-table :data="dataList" row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column fixed="left" :data-="dataList" type="selection" width="55" />
		<el-table-column fixed="left" property="id" label="ID" width="60" />
		<el-table-column property="evaluateContext" label="评价内容" />
		<el-table-column property="evaluateScore" label="评分" />
		<el-table-column property="sysUser.username" label="用户" />
		<el-table-column property="consultant.consultantName" label="咨询师" />
		<el-table-column property="evaluateTime" label="评价时间" />
		<el-table-column fixed="right" label="操作" min-width="120">
			<template #default="scope">
<!--				<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>-->
				<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- 书页组件 -->
	<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10,15,20]"
		:size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
		@current-change="handleCurrentChange" />

	<router-view></router-view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'


const pageSize = ref(5);
const currentPage = ref(1);

const size = ref('default');


const queryInfo = reactive({
	evaluateContext: '',
	username: '',
	consultantName: '',
	pageNum: 1,
	pageSize: 5
})

const total = ref(0);
const dataList = ref([]);

const axios = getCurrentInstance().appContext.config.globalProperties.axios;
// // 查询数据
const queryDataList = () => {
	axios.get(`consultantEvaluate/page`, {
		params: queryInfo,
	}).then((res) => {
		if (res.code == 200) {
			console.log(res.data)
			dataList.value = res.data.list;
			total.value = res.data.pageTotal;
		} else {
			ElMessage.error('数据查询失败')
		}
	})
}
//组件加载完毕，查询数据
onMounted(() => {
	queryDataList()
})
//存储复选的数据
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
	multipleSelection.value = val.map(item => {
		return item.id
	})

}
//每页显示条目数改变
const handleSizeChange = (val) => {
	queryInfo.pageSize = val;
	queryDataList();
}
//页码改变
const handleCurrentChange = (val) => {
	queryInfo.pageNum = val;
	queryDataList();
}

const title = ref('')
// 控制对话框是否显示
const dialogFormVisible = ref(false)

// 新增和修改数据
const counselorData = ref({
	username: '',
	counselorName: '',
	time: '',
	id: '',
	evaluateContent: '',
	evaluateTime: '',
	price: '',
})


const cancle = () => {
	counselorData.value = {
		username: '',
		counselorName: '',
		time: '',
		id: '',
		evaluateContent: '',
		evaluateTime: '',
		price: '',
	}
	dialogFormVisible.value = false
}

const confirm = () => {
	if (counselorData.value.id) {
		axios.put('counselorMessage', counselorData.value)
			.then((resp) => {
				if (resp.code == 200) {
					sessionStorage.setItem('className', JSON.stringify(resp.data))
					ElMessage.success('修改成功')
				} else {
					ElMessage.error('修改失败')
				}
				queryDataList()
				dialogFormVisible.value = false
			})
	} else {
		axios.post('counselorMessage', counselorData.value)
			.then((resp) => {
				if (resp.code == 200) {
					sessionStorage.setItem('className', JSON.stringify(resp.data))
					ElMessage.success('新增成功')
				} else {
					ElMessage.error('新增失败')
				}
				queryDataList();
				dialogFormVisible.value = false
			})
	}
}

const add = () => {
	title.value = '新增擅长领域'
	dialogFormVisible.value = true
}

const edit = (row) => {
	title.value = '编辑擅长领域'
	dialogFormVisible.value = true
	counselorData.value = row

}


const remove = (id) => {
	ElMessageBox.confirm('此操作永久删除该文件，是否继续？', '提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		},
	).then(() => {
		axios.delete(`consultantEvaluate/deleteById?id=${id}`)
			.then(resp => {
				if (resp.code == 200) {
					ElMessage.success('删除成功')
				} else {
					ElMessage.error('删除失败')
				}
				queryDataList();
			})
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '取消删除',
		})
	})
}

const batchRemove = () => {
	ElMessageBox.confirm('此操作永久删除该文件，是否继续？', '提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		},
	).then(() => {
		axios.delete(`consultantEvaluate/deleteBatch`, {
			params: {
				ids: multipleSelection.value.join(',')
			},
		})
			.then(resp => {
				if (resp.code != 200) {
					ElMessage.success('删除成功')
				} else {
					ElMessage.error('删除失败')
				}
				queryDataList();
			})
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '取消删除',
		})
	})
}


</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-breadcrumb {
	margin-bottom: 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}

.el-pagination {
	margin-top: 15px; }
		 .demo-form-inline .el-input {
		 --el-input-width: 220px;
		 }
		 .demo-form-inline .el-select {
		 --el-select-width: 220px;
		 }
</style>